<template>
  <div class="mains">
    <div class="echarts-main">
      <div class="titles">农情监测预计统计</div>
      <div class="echarts">
        <echart :options="option1"/>
      </div>
    </div>
    <div class="echarts-main">
      <div class="titles">自动化灌溉节水统计</div>
      <div class="echarts">
        <echart :options="option2"/>
      </div>
    </div>
    <div class="echarts-main">
      <div class="titles">农产品投入品监管</div>
      <div class="echarts">
        <echart :options="option3"/>
      </div>
    </div>
  </div>
</template>

<script>
import Echart from '@/components/echart/Echart.vue';
import {echarts4,echarts5,echarts6} from '../echarts/echart'
export default {
  components: { Echart },
  data() {
    return {
      option1:undefined,
      option2:undefined,
      option3:undefined
    };
  },
  created() {
    this.setEcharts();
  },
  mounted() {
    
  },

  methods: {
    setEcharts() {
      this.option1 = echarts4();
      this.option2 = echarts5();
      this.option3 = echarts6();
    }
  },
};
</script>

<style lang="scss" scoped>
.mains {
  margin-top: 117px;
  height: calc(100% - 117px - 30px);
  margin-left: 20px;
  .echarts-main {
    height: calc(100% / 3);
    .titles {
      width: 100%;
      height: 36px;
      line-height: 36px;
      font-size: 24px;
      font-family: ysbt;
      background: url(~assets/images/title_bg.png) no-repeat;
      background-size: 100% 100%;
      padding-left: 15px;
      text-shadow: 0 0 10px #fff,0 0 20px #1862b4,0 0 30px #1862b4;
    }
    .echarts {
      margin-top: 10px;
      height: calc(100% - 36px - 10px);
    }
  }
}
</style>